<template>
  <div class="component component-json">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">文本比对</h2>
      </div>
      <div class="row">
        <div class="compare-area">
          <div class="mergely-full-screen-8">
            <div class="mergely-resizer">
              <div id="mergely"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from '@/components/jquery/1.10.2/jquery.min.js'
import '@/components/mergely/package/vendor/codemirror.min.js'
import '@/components/mergely/package/vendor/searchcursor.min.js'
import '@/components/mergely/package/vendor/codemirror.min.css'
import '@/components/mergely/package/lib/mergely.js'
import '@/components/mergely/package/lib/mergely.css'

/* JSON转换 */
export default {
  components: {

  },

  data () {
    return {

    }
  },

  methods: {
    handleCompare () {

    }
  },

  mounted () {
    window.$ = $
    window.$('#mergely').mergely({
      // license: 'lgpl',
      cmsettings: {
        readOnly: false
      },
      lhs (setValue) {
        setValue('输入文本')
      },
      rhs (setValue) {
        setValue('输入文本')
      },
      editor_height: '700px'
    })
  }
}
</script>

<style lang="less">
.compare-area {
  position: relative;
  min-height: 700px;
}
#mergely-splash {
  display: none;
}
.CodeMirror {
  background: transparent;
}
</style>
